<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>新增职位</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
<body style="height:100%;background-color:#fff">
<div id="blank" class="header">
    <div v-back.tapmode class="back"></div>
    <span class="title">新增职位</span>
</div>
<div id="app" class="top-container" v-cloak style="background-color:#fff">
    <div class="addmember-nickname">
        <span>昵称:</span>
        <div><input v-model="nickname" placeholder="请输入昵称"></div>
    </div>
    <div class="addmember-nickname">
        <span>邀请码:</span>
        <div><input v-model="invite_code" placeholder="若无可不填"></div>
    </div>
    <div class="addmember-level">
        <p>职位</p>
        <div>
            <span v-for="(memberType, index) in memberTypes" v-myclick="[[memberType, index], selectType]" >
                <div :style="getBg(memberType)">
                    <img v-src=" '../../image/icon_select.png'" v-show="select == index">
                </div>
                <div>{{memberType.name}}</div>
            </span>
        </div>
    </div>
    <div class="addmember-fee">
        <div v-if="fee > 0">
            <span>还需补缴服务费</span><span>{{fee}}元</span>
        </div>
        <!--<div v-if="deposit > 0">-->
            <!--<span>还需补缴保证金</span><span>{{deposit}}元</span>-->
        <!--</div>-->
        <div>
            <span>总计</span><span>{{total}}元</span>
        </div>
    </div>
    <div class="btn-commit" style="margin-top:50px;" v-myclick="addMember" >确认新增</div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>

    var memberTypes,
        vm;
    apiready = function () {
        showProgress();
        setBSImg();

        new Vue({
            el: '#blank'
        });

        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            memberTypes = ret.content;
            initApp();
            api.parseTapmode();
        }
        pinet.post(URL.addMemberEdit, data, callback);

        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                memberTypes: memberTypes,
                nickname: '',
                invite_code: '',
                select: -1,
                fee: 0,
                deposit: 0,
                total: 0,
                level_id: '',
                activity_id: '',
                imgPath:'../../image/',
            },
            watch:{
                nickname:function (n, o) {
                    this.nameByte = n.replace(/[^\x00-\xff]/g,"xx").length;
                    if(this.nameByte > 12){
                        this.nickname = o;
                    }
                }
            },
            computed: {
                _nickname: function () {
                    return encodeURIComponent(this.nickname);
                }
            },
            methods: {
                selectType: function (memberType, index) {
                    this.fee = memberType.need_pay_fee;
                    this.deposit = memberType.need_pay_deposit;
                    this.total = memberType.need_pay_total;
                    this.level_id = memberType.level_id;
                    this.activity_id = memberType.activity_id;
                    this.select = index;
                },
                addMember: function () {
                    if (!this.nickname) {
                        alert('请输入昵称');
                        return;
                    }
                    if (!this.level_id) {
                        alert('请选择等级');
                        return;
                    }
                    showProgress();
                    var data = {
                        member_id:getPrefs('member_id'),
                        invite_code:this.invite_code
                    };
                    var callback = function () {
                        var params = {
                            foreign_infos: vm.level_id + ';' + vm.activity_id + ';' + vm._nickname + ';' + vm.invite_code,
                            order_type: 1,
                        };
                        openWin('payment', params);
                    };
                    pinet.post(URL.isInviteCodeValid, data, callback);
                },
                getBg: function (memberType) {
                    var memberStyle = getMemberStyle(memberType.level_id);
                    return {
                        backgroundImage:'url(' + this.imgPath + Vue.BSImg + '/' + memberStyle.levelup_bg +')'
                    };
                }
            }
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }


</script>
</html>
